function echarts_5(id5) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id5));
		myChart.clear();
/* 	function echarts_5() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echarts_5'));
 */
        var xData = function() {
            var data = ['NO.1','NO.2','NO.3','NO.4','NO.5'];

            return data;
        }();

        var data = [28, 22, 20, 16, 12]

        option = {
            // backgroundColor: "#141f56",

           /* tooltip: {
                show: "true",
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.4)', // 背景
                padding: [8, 10], //内边距
                // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                formatter: function(params) {
                    if (params.seriesName != "") {
                        return params.name + ' ：  ' + params.value + ' 辆';
                    }
                },

            },*/
            grid: {
                borderWidth: 0,
                top: 20,
                bottom: 35,
                left:55,
                right:30,
                textStyle: {
                    color: "#fff"
                }
            },
            xAxis: [{
                type: 'category',

                axisTick: {
                    show: false
                },
                /*axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#363e83',
                    }
                },*/
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    // formatter:function(val){
                    //     return val.split("").join("\n")
                    // },
                },
                data: xData,
            }, {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: xData,
            }],
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#32346c',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#32346c ',
                    }
                },
                /*axisLabel: {
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    formatter: '{value}',
                },*/
            },
            series: [{
                // name: '生师比(%)',
                type: 'bar',
                itemStyle: {
                    normal: {
                        show: true,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00c0e9'
                        }, {
                            offset: 1,
                            color: '#3b73cf'
                        }]),
                        barBorderRadius: 50,
                        borderWidth: 0,
                    },
                    emphasis: {
                        shadowBlur: 15,
                        shadowColor: 'rgba(105,123, 214, 0.7)'
                    }
                },
                zlevel: 2,
                barWidth: '20%',
                data: data,
            },
                {
                    name: '',
                    type: 'bar',
                    xAxisIndex: 1,
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            color: '#121847',
                            borderWidth: 0,
                            shadowBlur: {
                                shadowColor: 'rgba(255,255,255,0.31)',
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 2,
                            },
                        }
                    },
                    barWidth: '20%',
                    data: [30, 30, 30, 30, 30]
                }
            ]
        }


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
echarts_5('echarts_5');




function echarts_6(id6) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id6));
    myChart.clear();
    var data = {
        "chart": [{
            month: "NO.1",
            value: 600,

        },

            {
                month: "NO.2",
                value: 500,

            },

            {
                month: "NO.3",
                value: 614,

            },

            {
                month: "NO.4",
                value: 442,

            },

            {
                month: "NO.5",
                value: 322

            }

        ]
    }


    var xAxisMonth = [],
        barData = [],
        lineData = [];
    for (var i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].month);
        barData.push({
            "name": xAxisMonth[i],
            "value": data.chart[i].value
        });
        lineData.push({
            "name": xAxisMonth[i],
            "value": data.chart[i].ratio
        });
    }

    option = {
        // backgroundColor: "#020d22",
        title: '',
        grid: {
            top: '10%',
            left: '18%',
            bottom: '3%',
            right:'5%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function(params) {
                return params[0]["data"].name + "<br/>" + '报警次数: ' + params[1]["data"].value+'次' ;
            }
        },
        xAxis: [{
            type: 'category',
            show: false,
            data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'],
            axisLabel: {
                textStyle: {
                    color: '#b6b5ab'
                }
            }
        },
            {
                type: 'category',
                position: "bottom",
                data: xAxisMonth,
                boundaryGap: true,
                // offset: 40,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,0.2)"
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    color: "rgba(255,255,255,0.2)"
                },
                axisLabel: {
                    textStyle: {
                        color: '#b6b5ab'
                    }
                }
            }

        ],
        yAxis: [{
            show: true,
            offset: 52,
            splitLine: {
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,0.2)"
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                color: "rgba(255,255,255,0.2)"
            },
            axisLabel: {
                show: true,
                color: '#b6b5ab'
            }
        }, {
            show: false,
            type: "value",
            // name: "合格率(%)",
            nameTextStyle: {
                color: '#ccc'
            },
            axisLabel: {
                color: '#ccc'
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            }
        }],
        color: ['#e54035'],
        series: [{
            name: '训练人次',
            type: 'pictorialBar',
            xAxisIndex: 1,
            barCategoryGap: '-80%',
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = [
                            'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                            'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                            'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
                        ];
                        return colorList[params.dataIndex];
                    }
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: barData,
        },
            {
                symbol: 'image://',
                symbolSize: 42,
                name: "完成率",
                type: "line",
                yAxisIndex: 1,
                data: lineData,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: {
                            colorStops: [{
                                offset: 0,
                                color: '#821eff'
                            },

                                {
                                    offset: 1,
                                    color: '#204fff'
                                }
                            ],
                        }
                    }
                }
            }
        ]
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
echarts_6('echarts_6');
echarts_6('map');



function echarts_4(id4) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id4));
    myChart.clear();
    option = {

        tooltip : {
            trigger: 'item',
            formatter: "{b}: <br/>  {c} ({d}%)"
        },

        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [

            {
                name:'排名',
                type:'pie',
                color: ['#af89d6', '#f5c847', '#ff999a', '#0089ff','#25f3e6'],
                radius : [20, 100],
                center : ['50%', '50%'],
                roseType : 'area',
                data:[
                    {value:70, name:'NO.4'},
                    {value:90, name:'NO.3'},
                    {value:110, name:'NO.2'},
                    {value:150, name:'NO.1'},
                    {value:40, name:'NO.5'}

                ]
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
//echarts_4('echarts_4');



function echarts_3(id3) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id3));
	myChart.clear();
    option = {

        tooltip : {
            trigger: 'axis'
        },
        legend: {
            orient: 'vertical',
            data:['简易程序案件数']
        },
        grid: {
            left: '3%',
            right: '3%',
            top:'8%',
            bottom: '5%',
            containLabel: true
        },
        color:['#a4d8cc','#25f3e6'],
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',

                axisTick:{show:false},

                boundaryGap : false,
                axisLabel: {
                    textStyle:{
                        color: '#ccc',
                        fontSize:'12'
                    },
                    lineStyle:{
                        color:'#2c3459',
                    },
                    interval: {default: 0},
                    rotate:50,
                    formatter : function(params){
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 4;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            var tempStr = "";
                            tempStr=params.substring(0,4);
                            newParamsName = tempStr+"...";// 最终拼成的字符串
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }

                },
                data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时'
                    ,'18时','19时','20时','21时','22时','23时']
            }
        ],
        yAxis : {

            type : 'value',
            axisLabel: {
                textStyle: {
                    color: '#ccc',
                    fontSize:'12',
                }
            },
            axisLine: {
                lineStyle:{
                    color:'rgba(160,160,160,0.3)',
                }
            },
            splitLine: {
                lineStyle:{
                    color:'rgba(160,160,160,0.3)',
                }
            },

        }
        ,
        series : [
            {
                // name:'简易程序案件数',
                type:'line',
                areaStyle: {

                    normal: {type: 'default',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                            offset: 0,
                            color: '#25f3e6'
                        }, {
                            offset: 1,
                            color: '#0089ff'
                        }], false)
                    }
                },
                smooth:true,
                itemStyle: {
                    normal: {areaStyle: {type: 'default'}}
                },
                data:[710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410,710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
echarts_3('echarts_3');

function echarts_2(id2) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id2));
	myChart.clear();
    option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{b}  <br/>{c}辆"
        },
        legend: {
            x: 'center',
            y: '2%',
            data: ['车型一', '车型二', '车型三', '车型四', '车型五'],
            icon: 'circle',
            textStyle: {
                color: '#fff',
            }
        },
        calculable: true,
        series: [{
            name: '车型',
            type: 'pie',
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [41, 110],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ['50%', '20%'],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: 'area',
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: '{c}辆'
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length2: 1,
                },
                emphasis: {
                    show: true
                }
            },
            data: [{
                value: 600,
                name: '车型一',
                itemStyle: {
                    normal: {
                        color: '#f845f1'
                    }
                }
            },
                {
                    value: 1100,
                    name: '车型二',
                    itemStyle: {
                        normal: {
                            color: '#ad46f3'
                        }
                    }
                },
                {
                    value: 1200,
                    name: '车型三',
                    itemStyle: {
                        normal: {
                            color: '#5045f6'
                        }
                    }
                },
                {
                    value: 1300,
                    name: '车型四',
                    itemStyle: {
                        normal: {
                            color: '#4777f5'
                        }
                    }
                },
                {
                    value: 1400,
                    name: '车型五',
                    itemStyle: {
                        normal: {
                            color: '#44aff0'
                        }
                    }
                },

                {
                    value: 0,
                    name: "",
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                {
                    value: 0,
                    name: "",
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                {
                    value: 0,
                    name: "",
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                {
                    value: 0,
                    name: "",
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                {
                    value: 0,
                    name: "",
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}



/* function echarts_1(id1) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id1));

    var data = [
        {value: 12,name: '行业一'},
        {value: 13,name: '行业二'},
        {value: 70,name: '行业三'},
        {value: 52,name: '行业四'},
        {value: 35,name: '行业五'}
    ];

    option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{b}: <br/>{c} ({d}%)"
        },
        color: ['#af89d6', '#4ac7f5', '#0089ff', '#f36f8a', '#f5c847'],
        legend: { //图例组件，颜色和名字
            x: '70%',
            y: 'center',
            orient: 'vertical',
            itemGap: 12, //图例每项之间的间隔
            itemWidth: 10,
            itemHeight: 10,
            icon: 'rect',
            data: ['行业一', '行业二', '行业三', '行业四', '行业五'],
            textStyle: {
                color: [],
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        },
        series: [{
            name: '行业占比',
            type: 'pie',
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ['35%', '50%'], //饼图的中心（圆心）坐标
            radius: [50, 75], //饼图的半径
            avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: { //图形样式
                normal: {
                    borderColor: '#1e2239',
                    borderWidth: 2,
                },
            },
            label: { //标签的位置
                normal: {
                    show: true,
                    position: 'inside', //标签的位置
                    formatter: "{d}%",
                    textStyle: {
                        color: '#fff',
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontWeight: 'bold'
                    }
                }
            },
            data: data
        }, {
            name: '',
            type: 'pie',
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ['35%', '50%'], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: { //图形样式
                normal: {
                    borderColor: '#1e2239',
                    borderWidth: 1.5,
                    opacity: 0.21,
                }
            },
            label: { //标签的位置
                normal: {
                    show: false,
                }
            },
            data: data
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
echarts_1('echarts_1'); */

function echarts_1(id1){
	
	var myChart = echarts.init(document.getElementById(id1));
	myChart.clear();		
	option = {
	    title: {
	        text: '动态数据',
	        subtext: '动态图'
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            label: {
	                backgroundColor: 'rgba(0,0,0,0.4)',
	            }
	        }
	    },
	    legend: {
	        data:['最新成交价', '预购队列']
	    },
	    toolbox: {
	        show: true,
	        feature: {
	            dataView: {readOnly: false},
	            restore: {},
	            saveAsImage: {}
	        }
	    },
	    dataZoom: {
	        show: false,
	        start: 0,
	        end: 100
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: true,
	            data: (function (){
	                var now = new Date();
	                var res = [];
	                var len = 10;
	                while (len--) {
	                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
	                    now = new Date(now - 2000);
	                }
	                return res;
	            })()
	        },
	        {
	            type: 'category',
	            boundaryGap: true,
	            data: (function (){
	                var res = [];
	                var len = 10;
	                while (len--) {
	                    res.push(10 - len - 1);
	                }
	                return res;
	            })()
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
	            scale: true,
	            name: '价格',
	            max: 30,
	            min: 0,
	            boundaryGap: [0.2, 0.2]
	        },
	        {
	            type: 'value',
	            scale: true,
	            name: '预购量',
	            max: 1200,
	            min: 0,
	            boundaryGap: [0.2, 0.2]
	        }
	    ],
	    series: [
        {
            name:'预购队列',
            color:'#0089ff',
            type:'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:(function (){
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(Math.round(Math.random() * 1000));
                }
                return res;
            })()
        },
        {
            name:'最新成交价',
            type:'line',
            color:'#f5c847',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
                    len++;
                }
                return res;
            })()
        }
    ]
	};
	myChart.setOption(option);
	count = 11;
		setInterval(function (){
		    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
		
		    var data0 = option.series[0].data;
		    var data1 = option.series[1].data;
		    data0.shift();
		    data0.push(Math.round(Math.random() * 1000));
		    data1.shift();
		    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
		
		    option.xAxis[0].data.shift();
		    option.xAxis[0].data.push(axisData);
		    option.xAxis[1].data.shift();
		    option.xAxis[1].data.push(count++);
		    myChart.setOption(option);
		}, 2100);
	window.addEventListener("resize",function(){
		myChart.resize();
	});
}

echarts_1('echarts_1');



